<template>
  <by-background />

  <by-navigation-bar :title="type === '2' ? '实名认证' : '资质认证'" />

  <view class="padding-20">
    <template v-if="type === '1'">
      <view v-if="tno && form.storefrontLocation" class="padding-tb-10 padding-lr-20 bg-white card">
        <view class="padding-tb-20">
          <view class="flex-row align-center">
            <text class="text-30 color-t1 text-bold">签约商家</text>
            <view class="flex-row flex-center margin-left-26 tag">
              <image src="/static/assure.png" class="assure-img" />
              <text class="text-20 color-second">已认证</text>
            </view>
          </view>

          <view class="margin-top-20">
            <text class="text-30 color-t1">{{ form.storefrontName }}</text>
          </view>
        </view>
      </view>

      <view class="padding-top-40 padding-bottom-20 padding-lr-20 bg-white card margin-top-20">
        <view class="margin-bottom-40">
          <text class="text-30 color-t1">商家资质</text>
        </view>
<!--        <view class="margin-bottom-30">
          <text class="text-30 color-t1">商家名称 {{ form.storefrontName }}</text>
        </view>
        <view class="margin-bottom-30">
          <text class="text-30 color-t1">商家地址 {{ form.storefrontLocation }}</text>
        </view>-->
        <by-upload v-model="form.storefrontPicUrl" watermark :disabled="disabled" :count="9" @change="total = $event.total" />
      </view>
    </template>

    <template v-else>
      <view class="padding-tb-10 padding-lr-20 bg-white card">
        <view class="padding-tb-30" v-if="tno">
          <view class="flex-row align-center">
            <text class="text-30 color-t1 text-bold">实人认证</text>
            <view class="flex-row flex-center margin-left-26 tag">
              <image src="/static/assure.png" class="assure-img" />
              <text class="text-20 color-second">已认证</text>
            </view>
          </view>

          <view class="margin-top-30">
            <text class="text-30 color-t1">身份证号 {{ form.idCardNumber }}</text>
          </view>
        </view>

        <template v-else>
          <by-cell
              v-for="(item,index) in list"
              v-model="form[item.value]"
              :key="index"
              :label="item.label"
              :border="index < list.length - 1"
              :type="item.type"
              :placeholder="`请输入${item.label}`"
              :disabled="disabled"
          />
        </template>
      </view>

      <view v-if="!tno && type === '2'" class="padding-top-40 padding-bottom-20 padding-lr-20 bg-white card margin-top-20">
        <view class="margin-bottom-40">
          <text class="text-30 color-t1">手持身份证正反面</text>
        </view>
        <view class="flex-row justify-between padding-lr-10">
          <by-upload v-model="form.idCardFront" :disabled="disabled" :count="1" width="314rpx" height="224rpx" placeholder="正面照片" />
          <by-upload v-model="form.idCardBack" :disabled="disabled" :count="1" width="314rpx" height="224rpx" placeholder="反面照片" />
        </view>
      </view>

      <view v-if="type !== '2'" class="padding-top-40 padding-bottom-20 padding-lr-20 bg-white card margin-top-20">
        <view class="margin-bottom-40">
          <text class="text-30 color-t1">资格认证</text>
          <text class="text-26 color-placeholder">({{ total }}/9)</text>
        </view>

        <view class="margin-left-26">
          <by-upload v-model="form.certificateUrls" watermark :disabled="disabled" :count="9" @change="total = $event.total" />
        </view>
      </view>
    </template>

    <view class="margin-top-40 text-center">
      <text v-if="!disabled && type !== '2'" class="text-26 color-t2">请上传您的技师资格证书</text>
      <text v-else-if="tno && !type" class="text-26 color-t2">所有技师入驻技师之家平台，身份信息均以通过认证</text>
    </view>
  </view>

  <by-bottom-button v-if="!disabled" height="72rpx" font-size="32rpx" bold text="提 交" @click="submit"/>

  <by-upload-tip />
</template>

<script setup lang="ts">
import useUserStore from '@/store/user'
import { addTechnicianMaterial, getTechnicianMaterial, userGetTechnicianMaterial, addRealNameAuth, getRealNameAuth } from '@/common/api'
import { toast, loading } from '@/common/util'

const userStore = useUserStore()
const total = ref(0)
interface IFormItem{
  label: string
  value: 'idCardName' | 'idCardNumber' | 'idCardFront' | 'idCardBack' | 'certificateUrls'
  type?: 'text' | 'number'
}
const formList:IFormItem[] = [
  { label: '姓名', type: 'text', value: 'idCardName' },
  { label: '身份证号', type: 'number', value: 'idCardNumber' },
  { label: '身份证正面', value: 'idCardFront' },
  { label: '身份证反面', value: 'idCardBack' },
  { label: '资格证书', value: 'certificateUrls' }
]
const list = shallowRef<IFormItem[]>([])
interface IInfos{
  idCardName: string
  idCardNumber: string
  idCardFront: string
  idCardBack: string
  certificateUrls: string
  storefrontName?: string
  storefrontPicUrl?: string
  storefrontLocation?: string
  [key:string]: any
}
const form = reactive<IInfos>({
  idCardName: '',
  idCardNumber: '',
  idCardFront: '',
  idCardBack: '',
  certificateUrls: ''
})

// 提交资质
async function submit() {
  if (!type.value) {
    if (!form.idCardName) {
      toast('请输入姓名')
      return
    }
    if (!form.certificateUrls) {
      toast('请上传资格证书')
      return
    }
  } else {
    for (let i = 0; i < formList.length; i++) {
      const item = formList[i]
      if (!form[item.value]) {
        if (item.value === 'certificateUrls' && type.value === '2') break
        toast((item.type ? '请输入' : '请上传') + item.label)
        return
      }
    }
  }

  const load = loading('提交中...')
  if (type.value === '2') {
    const data = {
      uid: userStore.uid,
      name: form.idCardName,
      idCardNumber: form.idCardNumber,
      idCardFrontUrl: form.idCardFront,
      idCardBackUrl: form.idCardBack
    }
    Object.assign(userStore.realNameInfo, data)
    await addRealNameAuth(data)
  } else {
    await addTechnicianMaterial(form)
  }

  load.hide()
  toast('提交成功，请等待审核')
}

const tno = ref('')
const type = ref('')
onLoad(e => {
  tno.value = e?.id
  type.value = e?.type
  if (type.value !== '2') {
    list.value = [formList[0]]
    handleGetTechnicianMaterial()
  } else {
    list.value = formList.filter(item => item.type)
    handleGetRealNameAuth()
  }
})

// 获取资质
const disabled = ref(false)
async function handleGetTechnicianMaterial() {
  const res = tno.value ? await userGetTechnicianMaterial({
    tno: tno.value
  }) : await getTechnicianMaterial()
  const { data } = res
  if (tno.value) disabled.value = true
  Object.assign(form, data)
  console.log(form)
  if (form.certificateUrls) total.value = form.certificateUrls.split(',').length
}

// 获取实名认证
async function handleGetRealNameAuth() {
  const res = await getRealNameAuth()
  const { data } = res
  Object.assign(form, {
    idCardName: data.name,
    idCardNumber: data.idCardNumber,
    idCardFront: data.idCardFrontUrl,
    idCardBack: data.idCardBackUrl
  })
  Object.assign(userStore.realNameInfo, data)
}
</script>

<style scoped lang="scss">
@include setMargin(left, 26);

.card{
  border-radius: 16rpx;

  .tag{
    padding: 4rpx 10rpx;
    background: #FDD7B6;
    border-radius: 8rpx;

    .assure-img{
      width: 16rpx;
      height: 18rpx;
      margin-right: 4rpx;
    }

  }

}
</style>
